<template>
  <div class="detail">
    <van-nav-bar left-text="" left-arrow @click-left="back()">
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
    <div class="firstbg" >
      <van-swipe :show-indicators="false" indicator @change="onChange">
        <van-swipe-item v-for="(image, index) in images" :key="index" >
          <img class="proimg" v-lazy="image"  @click="getImg(images, index)"  />
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/4</div>
        </template>
      </van-swipe>

      <div class="box" >
        <div class="left">¥{{goodsInfo.originprice}}</div>
        <div class="right">销量:{{goodsInfo.sales}}</div>
      </div>
      <p class="prodesc">
        <span> {{goodsInfo.brand}} </span> <span>{{goodsInfo.category}}</span>{{goodsInfo.proname}}
      </p>
    </div>
    <!-- 级联 -->
    <div class="secondbg">
      <van-field
        v-model="fieldValue"
        is-link
        readonly
        label="送至"
        placeholder="请选择所在地区"
        @click="show = true"
      />
      <van-popup v-model="show" round position="bottom">
        <van-cascader
          v-model="cascaderValue"
          title="请选择所在地区"
          :options="options"
          @close="show = false"
          @finish="onFinish"
        />
      </van-popup>
    </div>
    <div class="thirdbg">
      <h5>猜你喜欢</h5>
      <ProductCom />
    </div>
    <BuydownbarCom  />
    <BacktopCom/>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
import BuydownbarCom from '@/components/BuydownbarCom'
import ProductCom from "@/components/ProductCom";
import Vue from "vue";
import { Lazyload } from "vant";
import { Cascader } from "vant";
import { Popup } from "vant";
import { Field } from "vant";
import {fun_prodetail} from '../api/index.js'
import  BacktopCom from  '@/components/BacktopCom'


Vue.use(Field);
Vue.use(Popup);
Vue.use(Cascader);
Vue.use(Lazyload);

export default {
  components: {ProductCom,BuydownbarCom,BacktopCom},
  
  data() {
    return {
      images: [
      
      ],
      proid:this.$route.params.proid,
      goodsInfo: {},
      current: 0,
      show: false,
      fieldValue: "",
      cascaderValue: "",
      options: [
        {
          text: "浙江省",
          value: "330000",
          children: [{ text: "杭州市", value: "330100" }],
        },
        {
          text: "江苏省",
          value: "320000",
          children: [{ text: "南京市", value: "320100" }],
        },
      ],
    };
  },
  
  methods: {
    onChange(index) {
      this.current = index;
    },
   
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },
     getImg(images, index) {
      ImagePreview({
        images: this.images,
        showIndex: true,
        loop: false,
        startPosition: index
      });
    },
    back(){
        this.$router.go(-1)
    },
    getGoodsInfo(){
        fun_prodetail(this.proid).then((res)=>{
            this.goodsInfo=res.data.data
            this.images.push(res.data.data.img1,res.data.data.img2,res.data.data.img3,res.data.data.img4,)
            //   console.log( this.goodsInfo);
        })
    },
    
   
   
  },
  created(){
    this.getGoodsInfo()
    
  }
  
  
};
</script>

<style scoped >
.detail {
  width: 100%;
  overflow-x: hidden;
}
.van-swipe {
  width: 20rem;
}
.proimg {
  width: 100%;
}
.custom-indicator {
  position: absolute;
  right: 0;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.307);
  border-radius: 0.8333rem 0 0 0.8333rem;
  padding-left: 0.5556rem;
  color: rgb(249,249,249);
}
.firstbg {
  background-color: #fff;
  padding-bottom: 0.5556rem;
  border-radius: 0 0 1.1111rem 1rem;
}
.secondbg {
  background-color: #fff;
  margin: 0.5556rem 0;
}
.thirdbg{
    margin-top: .5556rem;
    background-color: #fff;
}
.box {
  display: flex;
  width: 100%;
  padding: 0.2778rem 1rem;
  justify-content: space-between;
  align-items: center;
}
.box .left {
  color: rgb(255, 103, 103);
  font-size: 1.1111rem;
}
.box .right {
  font-size: 0.6667rem;
  color: rgb(144, 144, 144);
  margin-right: 1.6667rem;
}
p {
  padding: 0.4444rem .9444rem;
  font-size: .7778rem;
  font-weight: bold;
  line-height: 1.1111rem;
}

.prodesc span:nth-child(1) {
  background-color: red;
  color: #fff;
  padding: 0.0556rem 0.1667rem;
  text-align: center;
  border-radius: 0.2222rem;
  margin-right: 0.1667rem;
  vertical-align: middle;
  display: inline-block;
}
.prodesc span:nth-child(2) {
  background-color: rgb(0, 157, 255);
  padding: 0.0556rem 0.1667rem;
  color: #fff;
  text-align: center;
  border-radius: 0.2222rem;
  margin-right: 0.1667rem;
  vertical-align: middle;
  display: inline-block;
}
h5{
    padding: .5556rem .9444rem;
}
</style>